<template>
    <div style="min-width:829px">
    <div v-if="$route.path == '/shareProjectList'">
        <div class="vs-search-box">
            <el-form ref="form" :inline="true" :model="paging" label-width="110px">
                <el-form-item label="门店：">
                    <el-select v-model="paging.store_id" clearable style="width:200px" placeholder="请选择">
                        <el-option
                            v-for="item in shopList"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="订单编号:">
                    <el-input style="width:200px" v-model="paging.out_trade_no"></el-input>
                </el-form-item>
                <el-form-item label="" class="vs-right-btns">
                    <el-button @click="reset">重置</el-button>
                    <el-button @click="select(1)" type="primary">查询</el-button>
                </el-form-item>
                <el-form-item label="分享人手机号:">
                    <el-input style="width:200px" v-model="paging.phone"></el-input>
                </el-form-item>
                <el-form-item label="邀请码:">
                    <el-input style="width:200px" v-model="paging.code"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="vs-table-box">
            <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table" style="width: 100%">
                <el-table-column width="100px" label="ID" prop="id"></el-table-column>
                <el-table-column prop="out_trade_no" label="订单编号"> </el-table-column>
                <el-table-column prop="code" label="邀请码" >
                    <template v-if="scope.row.user" slot-scope="scope">
                         <span>{{scope.row.user.code}}</span>
                    </template>
                 </el-table-column>
                <el-table-column  label="分享项目" >
                    <template slot-scope="scope">
                        <span >{{scope.row.project.name}}</span>
                    </template>
                 </el-table-column>
                <el-table-column  label="分享人手机号" > 
                    <template slot-scope="scope" v-if="scope.row.shareUser">
                        <span >{{scope.row.shareUser.phone}}</span>
                    </template>
                </el-table-column>
                <el-table-column  label="被分享人昵称" > 
                    <template slot-scope="scope"> 
                        <span >{{scope.row.user.username}}</span>
                    </template>
                </el-table-column>
                 <el-table-column prop="share_time" label="点击时间" >
                     <template slot-scope="scope">
                        <span>{{scope.row.share_time | parseTime}}</span>
                    </template>
                </el-table-column>
                  <el-table-column label="下单时间" >
                    <template slot-scope="scope" v-if="scope.row.orders">
                        <span>{{scope.row.orders.pay_time}}</span>
                    </template>
                 </el-table-column>
                <el-table-column fixed="right" width="109" label="操作"> 
                    <template slot-scope="scope">
                        <span @click="setRow(1,scope.row)" class="tab-table-text">查看</span>
                    </template>
                </el-table-column>
            </el-table>
              <div class="vs-paging-box">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="paging.page"
                    :page-size="paging.limit"
                    layout="prev, pager, next, jumper"
                    :total="paging.total">
                </el-pagination>
            </div>
        </div>
    </div>
     <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading:false,
             paging: {
                type:2,
                id: '',
                phone: '',
                code: '',
                out_trade_no: '',
                page:1,
                limit:15,
                total:0,//总数
                store_id: ''
            },
            tableData: [],
            shopList: []
        };
    },
    created() {
       this.GetList()
       this.homegetStore()
    },
    methods: {
        async homegetStore(){
            let {code,data} = await this.$Http.homegetStore();
            if(code){
                this.shopList = data;
            }
        },
         handleCurrentChange(val){
            this.paging.page = val;
            this.GetList();
        },
         async GetList() {
            this.loading = true;
            let { code, data } = await this.$Http.getShareGoods(this.paging);
            this.loading = false;
            if (code) {
                data.data.forEach(ele=>{
                    let data = ele.share_time
                    // let data1 = new Date(data).getTime();
                    // ele.share_time = this.utlis.getNowDate(new Date(data))
                })
                this.tableData = data.data;
                this.paging.paging = data.total;
                this.paging.limit = data.per_page
            }
        },
        select(){
            // if(!this.paging.id && !this.paging.phone && !this.paging.code && !this.paging.orders_id){
            //       this.$message.success('搜索条件不能少于1个！')
            //       return false
            // }
            this.GetList()
        },
        async setRow(type,row){
            this.utils.goUrl(`/editProject?title=分享项目详情&id=${row.id}`)
        },
        reset(){//重置
             this.paging = this.$options.data().paging;
             this.GetList()
        },
    },
};
</script>

<style lang="scss" scoped>

.image-thumbnail{
    width: 130px;
    height: 130px;
}
</style>